/*
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-09-01 14:01:17
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-09-17 15:29:07
 */
import Vue from 'vue'
const v = new Vue()
import echarts from 'echarts'
// import '../../../../static/js/echarts/echarts.js'
/**
 * @description:民工男女比例
 */
export const drawFemaleRatio = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    color: ['#01D1CE', '#FF78F5'],
    graphic: [
      {
        type: 'text',
        top: '45%',
        left: 'center',
        style: {
          text: dataList[0].value + dataList[1].value,
          fontSize: 20,
          fill: '#53FFAC',
          fontWeight: 'normal',
        },
      },
      {
        type: 'text',
        top: '55%',
        left: 'center',
        style: {
          text: '总数',
          fill: '#fff',
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
    ],
    series: [
      {
        type: 'pie',
        radius: ['40%', '50%'],
        label: {
          normal: {
            show: true, //是否显示标签
            position: 'left',
            formatter: '{b|{b}}\n{hr|}\n{c|{c}} {d|{d}}%',
            rich: {
              b: {
                color: '#E6E6E6',
                align: 'left',
                lineHeight: 22,
              },
              hr: {
                borderColor: '#01D1CE',
                width: '100%',
                borderWidth: 3,
                height: 0,
              },
              c: {
                color: '#EABB30',
                lineHeight: 22,
              },
              d: {
                color: '#E6E6E6',
                lineHeight: 22,
              },
            },
          },
          emphasis: {
            //鼠标放在圆环上显示的标签样式
            show: true,
            textStyle: {
              fontSize: '12',
              fontWeight: 'bold',
            },
          },
        },
        data: dataList,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:民工开工比例
 */
export const drawOperatingRatio = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    color: ['#26BBFF', '#AA72FF', '#FF78F5', '#FED957', '#52FFAC'],
    series: [
      {
        type: 'pie',
        radius: ['40%', '50%'],
        label: {
          normal: {
            show: true, //是否显示标签
            position: 'left',
            formatter: '{b|{b}}\n{hr|}\n{c|{c}} {d|{d}}%',
            rich: {
              b: {
                color: '#E6E6E6',
                align: 'left',
                lineHeight: 22,
              },
              hr: {
                borderColor: '#01D1CE',
                width: '100%',
                borderWidth: 3,
                height: 0,
              },
              c: {
                color: '#EABB30',
                lineHeight: 22,
              },
              d: {
                color: '#E6E6E6',
                lineHeight: 22,
              },
            },
          },
          emphasis: {
            //鼠标放在圆环上显示的标签样式
            show: true,
            textStyle: {
              fontSize: '12',
              fontWeight: 'bold',
            },
          },
        },
        data: dataList,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:民工年龄分布
 */
export const drawAgeDistribution = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    calculable: true,
    color: ['#26BBFF', '#AA72FF', '#FF78F5', '#FED957', '#52FFAC'],
    series: [
      {
        type: 'pie',
        radius: ['20%', '60%'],
        label: {
          normal: {
            show: true, //是否显示标签
            position: 'left',
            formatter: '{b|{b}}\n{hr|}\n{c|{c}} {d|{d}}%',
            rich: {
              b: {
                color: '#E6E6E6',
                align: 'left',
                lineHeight: 22,
              },
              hr: {
                borderColor: '#01D1CE',
                width: '100%',
                borderWidth: 3,
                height: 0,
              },
              c: {
                color: '#EABB30',
                lineHeight: 22,
              },
              d: {
                color: '#E6E6E6',
                lineHeight: 22,
              },
            },
          },
          emphasis: {
            //鼠标放在圆环上显示的标签样式
            show: true,
            textStyle: {
              fontSize: '12',
              fontWeight: 'bold',
            },
          },
        },
        roseType: 'area',
        data: dataList,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:民工驻地分布
 */
export const drawFieldDistribution = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    toolbox: { show: false },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 14,
        start: 0,
        end: 50,
        xAxisIndex: [0],
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '17%',
      containLabel: true,
    },
    //-------------   x轴   -------------------
    xAxis: {
      scale: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
      },
      data: dataList.nameArray, //内容
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
        lineStyle: {
          fontSize: 12,
          color: '#fff',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#416180',
          width: 0.5,
        },
      },
      axisTick: {
        show: false,
      },
      name: '人数',
      nameLocation: 'end',
      nameGap: 22,
      nameTextStyle: {
        align: 'center',
        fontSize: 10,
        padding: [0, 40, 0, 0],
      },
    },
    series: [
      {
        name: '人次', //---系列名称
        type: 'bar', //---类型
        itemStyle: {
          color: '#6DEFFF',
        },
        barWidth: '20', //---柱形宽度
        barCategoryGap: '20%', //---柱形间距
        data: dataList.firstNumArray,
        label: {
          show: true,
          position: 'top',
          color: '#E3F00D',
          formatter: (params) => {
            return `${params.value}`
          },
        },
        markPoint: {
          symbol: 'pin', //标记类型
          symbolSize: 35,
          itemStyle: {
            color: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
          },
          label: {
            color: 'rgba(235, 225, 26, 1)',
          },
        },
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}

/**
 * @description:民工学历分布
 */
export const drawEducationalDistribution = (id, dataList) => {
  let sexChart = echarts.init(document.getElementById(id))
  sexChart.setOption({
    color: ['#26BBFF', '#AA72FF', '#FF78F5', '#FED957', '#52FFAC'],
    series: [
      {
        type: 'pie',
        radius: ['40%', '50%'],
        startAngle: 180,
        label: {
          normal: {
            show: true, //是否显示标签
            position: 'left',
            formatter: '{b|{b}}\n{hr|}\n{c|{c}} {d|{d}}%',
            rich: {
              b: {
                color: '#E6E6E6',
                align: 'left',
                lineHeight: 22,
              },
              hr: {
                borderColor: '#01D1CE',
                width: '100%',
                borderWidth: 3,
                height: 0,
              },
              c: {
                color: '#EABB30',
                lineHeight: 22,
              },
              d: {
                color: '#E6E6E6',
                lineHeight: 22,
              },
            },
          },
          emphasis: {
            //鼠标放在圆环上显示的标签样式
            show: true,
            textStyle: {
              fontSize: '12',
              fontWeight: 'bold',
            },
          },
        },
        data: dataList,
      },
    ],
  })
  window.addEventListener('resize', () => {
    sexChart.resize()
  })
}
